{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['UI 示例:example/layout/index', '示例页面:example/pages/index', '选择示例4'])}
<style>
    .selectgroup {
        display: -ms-inline-flexbox;
        display: inline-flex
    }
    .selectgroup-item {
        -ms-flex-positive: 1;
        flex-grow: 1;
        position: relative;
        font-weight: 400!important
    }
    .selectgroup-item+.selectgroup-item {
        margin-left: -1px
    }
    .selectgroup-item:not(:first-child) .selectgroup-button {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
    }
    .selectgroup-item:not(:last-child) .selectgroup-button {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }
    .selectgroup-input {
        opacity: 0;
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0
    }
    .selectgroup-button {
        display: block;
        color: var(--bs-body-color);
        border: 1px solid var(--bs-gray-300);
        text-align: center;
        padding: .375rem 1rem;
        position: relative;
        cursor: pointer;
        border-radius: 0.125rem;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        font-size: 14px;
        line-height: 1.5rem;
        min-width: 2.375rem
    }
    .selectgroup-button-icon {
        padding-left: .5rem;
        padding-right: .5rem;
        font-size: 1rem
    }
    .selectgroup-input:checked+.selectgroup-button {
        border-color: var(--bs-primary);
        z-index: 1;
        color: var(--bs-primary);
        background: rgba(var(--bs-primary-rgb), .15)
    }
    .selectgroup-input:focus+.selectgroup-button {
        border-color: var(--bs-primary);
        z-index: 2;
        color: var(--bs-primary);
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), .25)
    }
    </style>

<div class="row">

    <div class="col-lg-12">
      <div class="card">
        <div class="card-body">
        
        <p>改选择采用单选框，表单提交可正常获取值。</p>
        <div class="mb-3">
          <label class="form-label">尺寸</label>
          <div class="selectgroup w-100">
            <label class="selectgroup-item">
              <input type="radio" name="value" value="50" class="selectgroup-input" checked="">
              <span class="selectgroup-button">S</span>
            </label>
            <label class="selectgroup-item">
              <input type="radio" name="value" value="100" class="selectgroup-input">
              <span class="selectgroup-button">M</span>
            </label>
            <label class="selectgroup-item">
              <input type="radio" name="value" value="150" class="selectgroup-input">
              <span class="selectgroup-button">L</span>
            </label>
            <label class="selectgroup-item">
              <input type="radio" name="value" value="200" class="selectgroup-input">
              <span class="selectgroup-button">XL</span>
            </label>
          </div>
        </div>
        <p>给div增加 <code>w-100</code> 可以让它占满一行。</p>
        <div class="mb-3">
          <label class="form-label d-block">使用图标</label>
          <div class="selectgroup">
            <label class="selectgroup-item">
              <input type="radio" name="medium" value="cellphone" class="selectgroup-input" checked="">
              <span class="selectgroup-button"><i class="mdi mdi-cellphone"></i></span>
            </label>
            <label class="selectgroup-item">
              <input type="radio" name="medium" value="tablet" class="selectgroup-input">
              <span class="selectgroup-button"><i class="mdi mdi-tablet"></i></span>
            </label>
            <label class="selectgroup-item">
              <input type="radio" name="medium" value="monitor" class="selectgroup-input">
              <span class="selectgroup-button"><i class="mdi mdi-monitor"></i></span>
            </label>
          </div>
        </div>
        
        <div class="form-group">
          <button class="btn btn-default mb-3" id="getChose">获取选中值</button>
          <pre class="m-t-10" id="console"></pre>
        </div>
        
        </div>
      </div>
  </div>

</div>

<script type="text/javascript">
    $(document).ready(function(){
        $('#getChose').on('click', function() {
            var deploy = $('input[name="value"]:checked').val();
            var medium = $('input[name="medium"]:checked').val();
            
            $('#console').html('你选中的配置是：' + deploy + '---' + medium + '\n');
        });
    });
    </script>